<template>
  <view class="twelve-animals" :style="{ 'background-image': 'url(' + bg + ')' }" >
    <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
    <Result v-else :content="content" v-model:defStatus="defStatus"  />
  </view>
  <Roast />
  <Recommend :top='98'/>
  <ToDY />
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
import Start from "./components/Start.vue";
import Result from "./components/Result.vue";

import Roast from "@/components/Roast/Roast.vue";
import Recommend from "@/components/Recommend/Recommend.vue";
import ToDY from "@/components/ToDY/ToDY.vue";

const defStatus = ref(EnumStatus.STATUS)
const content = ref()
const bg = computed(()=>{
  return defStatus.value === EnumStatus.STATUS ? 'https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/sas/animals/bg-start.jpg' 
  : 'https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/sas/animals/bg-re.png'
})

</script>

<style>
page{
  width: 100%;
  height: 100%;
}

</style>

<style lang="scss" scoped>
.twelve-animals{
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
   
}

</style>
